<template>
  <div class="outer" style="height:45px">
  <div class="headMenuContainer">
    <div class="menuBack" @click="goBack">
      <i class="iconfont">&#xe603;</i>
    </div>
    <div class="menuDrop">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1"  v-on:change="itemChange"/>
      </van-dropdown-menu>
    </div>
    <div class="menuPhone">手机查单</div>
  </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup(props,context) {
    const value1 = ref(0);
    const router = useRouter()
    const option1 = [
      { text: "全部订单", value: 0 },
      { text: "机票", value: 1 },
      { text: "酒店", value: 2 },
      { text: "酒店住宿", value: 3 },
      { text: "汽车票.船票", value: 4 },
      { text: "火车票", value: 5 },
      { text: "门票", value: 6 },
      { text: "美食团购", value: 7 },
      { text: "专车.租车", value: 8},
      { text: "旅游度假团购", value: 9 },
      { text: "签证", value: 10 },
      { text: "惠玩当地", value: 11},
      { text: "保险.车险", value: 12 },
      { text: "全球购", value: 13},
      { text: "当地购", value: 14}
    ],
    // 点击选项导致value变化触发的回调函数
      itemChange = (e)=>{
        // console.log('item变化',e);
        // 顶部option发生变化时将事件派发给父组件处理
        context.emit('changeProductData',option1[e])
      }
      // 点击返回按钮
      const goBack = ()=>{
        router.go(-1)
      }
    return {
      value1,
      option1,
      itemChange,
      goBack
    };
  },
};
</script>

<style>
.headMenuContainer {
  position: fixed;
  top: 0;
  left: 0;
  height: 45px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 5px 10px;
  box-sizing: border-box;
  align-items: center;
}
.headMenuContainer .menuBack .iconfont {
  font-size: 22px;
}
.menuPhone {
  font-size: 15px;
}

/* 对vant的组件样式修改 */
:root {
  --van-dropdown-menu-box-shadow: none;
  --van-dropdown-menu-option-active-color: #fff;
  --van-dropdown-menu-option-active-color: #00d4e3;
  --van-dropdown-menu-title-active-text-color:#00d4e3;  
  --van-dropdown-menu-background-color:#F0F2F5;
  /* --van-dropdown-menu-background-color:#00D4E3; */
  /* --van-dropdown-menu-title-active-text-color:#00D4E3; */
}
.van-dropdown-item__option--active {
  background: #00d4e3 !important;
  color: white;
}
.van-cell {
  width: 115px;
  height: 36px;
  margin: 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-popup {
  background: rgb(237, 239, 242);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 0px;
}
.van-cell__value {
  display: none;
  /* flex: none; */
}
.van-cell__title {
  flex: none !important;
}
</style>
